<template>
  <div class="detail-list">
    <order-item title="消费:" :width="80">
      <span class="detail-item">{{item.groupExpences}}</span>
    </order-item>
    <order-item title="中奖:" :width="80">
      <span class="detail-item">{{item.totlaBonus}}</span>
    </order-item>
    <order-item title="彩票返点:" :width="80">
      <span class="detail-item">{{item.lotteryRefund}}</span>
    </order-item>
    <order-item title="BJ返点:" :width="80">
      <span class="detail-item">{{item.bjRefund}}</span>
    </order-item>
    <order-item title="盈亏总额:" :width="80">
      <span class="detail-item" :class="item.groupBalance > 0 ? 'red': item.groupBalance < 0 ? 'green' : ''">{{item.groupBalance}}</span>
    </order-item>
  </div>
</template>

<script>
import OrderItem from '@/components/base/order-specification/order-item'
export default {
  components: {
    OrderItem
  },
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          date: new Date().getTime() - 100 * 24 * 3600 * 1000,
          userid: '1214',
          isLogin: false,
          password: '1',
          accountName: 'zhangsan88',
          groupBalance: 1112223,
          groupExpences: 12356,
          totalMembers: 12345,
          directMembers: 123,
          lotteryRefund: 2345,
          bjRefund: 1234,
          totlaBonus: 123456,
          parent: {},
          members: []
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .detail-list 
    background #fff
    .detail-item 
      &.red 
        color $color-theme-red 
      &.green 
        color $color-primary-green 
</style>